<template>
  <view>
    <u-form-item :required="item.required" :label="$t(item.label)" :key="item.key">
      <view>
		  <view style="float: left;" v-if="postid>0 && postvideo && show">
		  	<video :src="toImages(postvideo)" style="width: 215rpx;height: 120rpx;"></video>
		  </view>
        
		<view class="upload_list">
			<view class="upload_run">
				<image @click="chooseFiles" :src="HTTP_IMG_UTL+'upload_262@4x.png'" mode="" style="width: 212rpx;height: 212rpx;" v-if="postid>0  && postvideo"></image>
				<image @click="chooseFiles" :src="HTTP_IMG_UTL+'upload_262@4x.png'" mode="" style="width: 212rpx;height: 212rpx;" v-else></image>
			</view>
			
			<view class="filePreview" style="float: left;">
			  <view class="item" v-if="filesLoading && videoName !== ''">
			    <view class="text">
			      {{ videoName.substring(videoName.length, videoName.length - 20) }}
			    </view>
			    <view class="delete" @click="deleteUploadList()">X</view>
			  </view>
			</view>
		</view>
		
        
		
      </view>
    </u-form-item>
  </view>
</template>
<script>
	import {
		HTTP_IMG_UTL
	} from '@/config/app'
import {HTTP_REQUEST_URL, FILE_MAX_SIZE, FILE_MAX_COUNT,IMAGE_URL,IMAGE_PIC} from '@/config/app';
var shuzu = [];
export default {
  props: {
    item: {
      type: Object,
      default: {},
      required: true
    },
	postvideo:{
		type: [Array,Object,Number,String],
		default:''
	},
	postid:{
		type: [Array,Object,Number,String],
		default:''
	}
  },
  watch: {
  	postvideo: {
  	  	handler(culVal) {
  	  		console.log(culVal)
  	  	},
  	  	immediate: true,
  		deep:true,
  	}
  },
  data() {
    return {
		HTTP_IMG_UTL,
      uploadDataList: [],
      action: HTTP_REQUEST_URL + '/common/upload',
      width: 150,
      height: 150,
      filesLoading: false,
      videoName: '',
	  show:true,
    };
  },
  mounted() {
    console.log('this.item.value-videos', this.item)
	if(this.item.value==null){
		this.item.value = []
	}
    this.uploadDataList = JSON.parse(JSON.stringify(this.item.value))
    console.log('this.item.value-uploadDataList', this.uploadDataList)
    if (this.item.value.length > 0) {
      this.videoName = this.item.value[0].url
    }
    this.filesLoading = true
  },
  methods: {
    districts(val) {
      return val.length > 6 ? val.slice(0, 6) + "..." : val
    },
    onSuccess(data, index, lists, name) {// 上传成功
      this.setFromData(lists)
    },
    onRemove(index, lists, name) {
      // console.log('remove', lists)
      this.setFromData(lists)
    },
    setFromData(lists) {
      let formData = [];
      if (lists.length > 0) {
        for (let i = 0; i < lists.length; i++) {
          if (lists[i].response) {
            let temp = {
              url: lists[i].response.data.url
            }
            formData.push(temp)
          } else if (lists[i].url) {
            let temp = {
              url: lists[i].url
            }
            formData.push(temp)
          }
        }
      } else {
        formData = []
      }
      // console.log('formData', formData)
      this.$emit('change', this.item.key, formData)
    },
    chooseFiles() {
      const that = this
      uni.chooseVideo({
        count: 1,
        compressed: true,
        success: function (res) {
          uni.showLoading({
            title: that.$t('上传中')
          })
          if (res.size > 52428800) {
            that.$u.toast(that.$t('上传文件过大'))
            return false
          }
          console.log('chooseVideo', res)
          const tempFilePaths = res.tempFilePath
          that.videoName = res.tempFilePath
          that.uploadFile(tempFilePaths)
        }
      });
    },
    uploadFile(file) {
      const that = this
	  shuzu = [];
      uni.uploadFile({
        url: that.action,
        filePath: file,
        name: 'file',
        success: (uploadFileRes) => {
          console.log('uploadFileRes', uploadFileRes)
          uni.hideLoading()
          const resData = JSON.parse(uploadFileRes.data)
          if (resData.code === 1) {
			this.show = false
            let resUrl = {url: resData.data.url}
            shuzu.push(resUrl)
			that.uploadDataList = shuzu
            that.$emit('change', that.item.key, that.uploadDataList)
          } else {
            that.$u.toast(resData.msg)
          }
        }
      });
    },
    deleteUploadList() {
      this.uploadDataList.splice(0, 1)
      this.videoName = ''
      this.$emit('change', this.item.key, this.uploadDataList)
    }
  },
  computed: {
  	toImages() {
  		return (src) => {
  			try {
  				return IMAGE_URL + src
  			} catch (e) {
  				
  			}
  		}
  	},
  }
}
</script>

<style lang="scss">
	.upload_list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.upload_run{
		display: flex;
		flex-direction: column;
	}
	.addFiles_type{
		width: 212rpx;
		height: 212rpx;
		border: 2px solid #EDEDED;
		background-color: #F7F7F7;
		border-radius: 212rpx;
	}
.addFiles {
  color: #F79B29;
}

.filePreview {
  display: flex;
  // flex-direction: column;

  .item {
    display: flex;

    .text {
      color: #999999;
      width: 360rpx;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;
      white-space: normal;
    }

    .delete {
      font-size: 20rpx;
      width: 30rpx;
      height: 30rpx;
      background-color: #fa3534;
      color: #FFFFFF;
      border-radius: 50%;
      line-height: 30rpx;
      text-align: center;
    }
  }
}
</style>
